<template>
	<view class="search-input__wrap">
		<uni-transition 
			mode-class="slide-left" 
			custom-class="inner_placeholder" 
			:show="!isFocus">
			<u-icon name="search"></u-icon>
			<text>{{ placeholder }}</text>
		</uni-transition>
		<view class="icon" v-show="isFocus">
			<u-icon name="search"></u-icon>
		</view>
		<input 
			type="text" 
			v-model="input_msg"
			@blur="inputBlur" 
			@focus="inputFocus" 
			placeholder-class="placeholder" 
			:placeholder="isFocus?placeholder:''" 
			class="inner_input" 
			/>
	<!-- 	<view class="icon-clean" v-show="input_msg">
			<u-icon name="close-circle"></u-icon>
		</view> -->
	</view>
</template>

<script>
export default {
	emits:["update:modelValue"],
	data() {
		return {
			placeholder: '许嵩',
			isFocus: false,
			input_msg:''
		};
	},
	methods: {
		inputFocus() {
			this.isFocus = true;
		},
		inputBlur(){
			this.isFocus = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.search-input__wrap {
	width: 100%;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	.inner_input {
		width: 100%;
		height: 100%;
		border: 1px solid #ccc;
		border-radius: 24px;
		padding: 0 24px;
	}
	.placeholder {
		font-size: 14px;
		color: #ccc;
	}
	.inner_placeholder {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		height: 100%;
		color: #ccc;
		font-size: 14px;
		border-radius: 24px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.icon{
		position: absolute;
		left: 5px;
		top: 50%;
		transform: translateY(-50%);
	}
	.icon-clean{
		position: absolute;
		right: 5px;
		top: 50%;
		transform: translateY(-50%);
	}
}
</style>
